<template>
  <div class="layout">
    <div class="logo">
      <img src="../assets/logo.png" >
    </div>
    <tit :name="form"></tit>
    <ul>
      <li><i class="iconfont icon-account1"></i> <router-link to="/login">login</router-link></li>
      <li><i class="iconfont icon-survey"></i> <router-link to="/regist">regist</router-link></li>
      <li><i class="iconfont icon-folder"></i> <router-link to="/uploadPage">upload</router-link></li>
      <li><i class="iconfont icon-form"></i> <router-link to="/form-cells">form-cells</router-link></li>
    </ul>
    <tit :name="ui"></tit>
    <ul>
      <li><i class="iconfont icon-pic"></i> <router-link to="/slide">slide</router-link></li>
      <li><i class="iconfont icon-Viewlist"></i> <router-link to="/notice">notice</router-link></li>
      <li><i class="iconfont icon-rili-copy"></i> <router-link to="/tab">tab</router-link></li>
      <li><i class="iconfont icon-map"></i> <router-link to="/form-cells">date-picker</router-link></li>
      <li><i class="iconfont icon-process"></i> <router-link to="/form-cells">city-picker</router-link></li>
      <li><i class="iconfont icon-top"></i> <router-link to="/form-cells">progress bar</router-link></li>
      <li><i class="iconfont icon-quanbu"></i> <router-link to="/form-cells">to-top</router-link></li>
      <li><i class="iconfont icon-comments"></i> <router-link to="/form-cells">actionsheet</router-link></li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import tit from '../components/tit/tit.vue';
  export default {
    data () {
      return {
        form: 'Form',
        ui: 'UI'
      };
    },
    components: {
      tit
    }
  };
</script>

<style lang="scss" scoped>

  .layout{

    .logo{
      width: 100%;
      height: 100px;
      text-align: center;
      padding-top: 25px;
      border-bottom: 2px solid #41B883;
      background-color: #fff;
      /*border-bottom: 1px solid #41B883;*/

      img{
        display: inline-block;
        height: 50px;
        width: 50px;
      }
    }

  ul{
    background-color: #fff;

    li{
      height:45px;
      line-height: 44px;
      padding-left:30px;
      margin-left:17px;
      border-bottom: 1px solid #eee;
      position: relative;

      a{
        display: block;
        font-size: 14px;
        color: #1d1d1d;
      }

      i{
        position: absolute;
        left: 5px;
        color: #41B883;
      }
    }
  li:before{
    content: '';
    width: 6px;
    height: 6px;
    border: 1px solid #ccc;
    border-left: transparent;
    border-bottom: transparent;
    position: absolute;
    right: 15px;
    top: 20px;
    transform: rotate(45deg);
  }
  }

  }
</style>
